<template>
    <div style="height: 70px;">
        <div  class="mo-navbar">
            <div  class="logo-content"><img  src="@/assets/img/logo_wtx.png"
                    class="logo">
                <div  class="logo-text"><img  src="@/assets/img/logo_text.png">
                    提高您的办公效率 </div>
            </div>
            <div  class="categories-content"><img 
                    src=""
                    alt="分类按钮" class="categories-img"> 全部分类 </div>
            <div  class="search-content"></div>
            <div  class="login-content">
                <div  class="avatar-border"><img 
                        src=""
                        class="avatar"></div>
                <div  class="login-text">
                    <div  class="username">未登录</div>
                    <div  class="login-type">(点击登录)</div>
                </div>
            </div>
        </div>
        <div   class="mo-pc-login-popup"></div>
        <div   class="mo-categories-dialog">
            <div  class="el-dialog__wrapper" style="display: none;">
                <div role="dialog" aria-modal="true" aria-label="dialog" class="el-dialog custom-categories-dialog"
                    style="margin-top: 68px; width: 1000px;">
                    <div class="el-dialog__header"><span class="el-dialog__title"></span></div>
                </div>
            </div>
        </div>
    </div>
    <div  class="mo-index view">
        <div  class="head">
            <div  class="title">包含各类合同办公文档，为办公带来高效便利</div>
            <div  class="mo-search-box search-box" style="--h: 60px;">
<!-- 
                <div  class="el-select file-type">
                    <div class="el-input el-input--suffix"><input type="text"  autocomplete="off"
                            placeholder="请选择" class="el-input__inner"><span class="el-input__suffix"><span
                                class="el-input__suffix-inner"><i
                                    class="el-select__caret el-input__icon el-icon-arrow-up"></i></span></span>
                    </div>
                    <div class="el-select-dropdown el-popper filetype-dropdown" style="display: none; min-width: 110px;">
                        <div class="el-scrollbar" style="">
                            <div class="el-select-dropdown__wrap el-scrollbar__wrap"
                                style="margin-bottom: -22px; margin-right: -22px;">
                                <ul class="el-scrollbar__view el-select-dropdown__list">
                                    <li  class="mo-search-box selected"><span>全部格式</span></li>
                                    <li  class="el-select-dropdown__item"><span>PPT模板</span></li>
                                    <li  class="el-select-dropdown__item"><span>Word模板</span></li>
                                    <li  class="el-select-dropdown__item"><span>Excel模板</span></li>
                                </ul>
                            </div>
                            <div class="el-scrollbar__bar is-horizontal">
                                <div class="el-scrollbar__thumb" style="transform: translateX(0%);"></div>
                            </div>
                            <div class="el-scrollbar__bar is-vertical">
                                <div class="el-scrollbar__thumb" style="transform: translateY(0%);"></div>
                            </div>
                        </div>
                    </div>
                </div><input  placeholder="搜索精品文档模板">
                <div  class="s-btn s-btn-inner"><img 
                        src="">搜索
                </div> -->

                <el-select
                    :teleported="false"
                    v-model="geshiData.geshiValue"
                    class="el-select file-type"
                    popper-class="mySelectStyle"
                >
                    <el-option
                    v-for="item in geshiData.geshiList"
                    :key="item.value"
                    :label="item.key"
                    :value="item.value"
                    />
                </el-select>
                <input
                    v-model="searchValue"
                    placeholder="搜索精品文档模板"
                />
                <div  class="s-btn s-btn-inner"><img 
                        src="">搜索
                </div>

                <div   class="mo-search-helping-panel helping" style="display: none;">
                    <div  class="history"><span  class="history-title">搜索历史：</span>
                    </div>
                    <div  class="rank-item rank-item-1">
                        <div  class="num">1</div>
                        <div >保密协议</div>
                    </div>
                    <div  class="rank-item rank-item-2">
                        <div  class="num">2</div>
                        <div >借款合同</div><img 
                            src="@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"
                            class="hot">
                    </div>
                    <div  class="rank-item rank-item-3">
                        <div  class="num">3</div>
                        <div >公司章程</div>
                    </div>
                    <div  class="rank-item rank-item-4">
                        <div  class="num">4</div>
                        <div >劳务合同</div>
                    </div>
                    <div  class="rank-item rank-item-5">
                        <div  class="num">5</div>
                        <div >合作协议</div>
                    </div>
                    <div  class="rank-item rank-item-6">
                        <div  class="num">6</div>
                        <div >房屋租赁合同</div><img 
                            src="@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"
                            class="hot">
                    </div>
                    <div  class="rank-item rank-item-7">
                        <div  class="num">7</div>
                        <div >装修合同</div>
                    </div>
                    <div  class="rank-item rank-item-8">
                        <div  class="num">8</div>
                        <div >采购合同</div>
                    </div>
                    <div  class="rank-item rank-item-9">
                        <div  class="num">9</div>
                        <div >公司考勤管理制度</div>
                    </div>
                    <div  class="rank-item rank-item-10">
                        <div  class="num">10</div>
                        <div >民事起诉状模板</div><img 
                            src="@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"
                            class="hot">
                    </div>
                </div>
            </div>
            <div  class="hot-keys"> 热门关键词：<span >个人住房合同范本</span><span
                    >劳务合同</span><span >婚内财产协议书</span><span
                    >婚前协议书</span></div>
        </div>
        <div  class="types standard-block">
            <div  class="type-item"
                style="--nameClr: #18549A; background: url(&quot;@/assets/img/type-qygd.2a2096c3.png&quot;); --subClr: #1E5596;">
                <div  class="item-name">企业创办和股东</div>
                <div  class="sub-name">IPO上市/股东协议等</div>
            </div>
            <div  class="type-item"
                style="--nameClr: #C65750; background: url(&quot;@/assets/img/type-hyjt.fd208157.png&quot;); --subClr: #D65E56;">
                <div  class="item-name">婚姻和家庭</div>
                <div  class="sub-name">婚前协议/婚内协议等</div>
            </div>
            <div  class="type-item"
                style="--nameClr: #44B46A; background: url(&quot;@/assets/img/type-ldlw.13797949.png&quot;); --subClr: #4B9965;">
                <div  class="item-name">劳动工作生活</div>
                <div  class="sub-name">劳动合同/劳务合同等</div>
            </div>
            <div  class="type-item"
                style="--nameClr: #DA9225; background: url(&quot;@/assets/img/type-tzmm.691c97d2.png&quot;); --subClr: #C79346;">
                <div  class="item-name">生意投资买卖</div>
                <div  class="sub-name">出资合同/投资协议等</div>
            </div>
        </div>
        <div   class="hot-recommend standard-block">
            <div  class="hot-rec-title"> 精选文档推荐 </div>
            <div   class="mo-file-card-list" style="--w: 280px; --c: auto-fill;">
                <div  class="grid-list">
                    <div  class="wrapper">
                        <div   class="mo-file-card my-card-item">
                            <div  class="card-title"><img 
                                    src="@/assets/img/word_icon.png" class="file-icon">
                                <div  class="card-title-text">
                                    <div  class="main-text">多人合作投资合作协议书</div>
                                    <div  class="subtitle-text">docx<span
                                            >|</span>A4标准打印<span >|</span>可修改</div>
                                </div>
                            </div>
                            <div  class="good-image-content"><img 
                                    src="http://file.zhiniceshi.com/mo_file/good_image/20231122/4672.jpg" alt="多人合作投资合作协议书"
                                    class="good-image">
                                <div  class="show-hover">
                                    <div   class="mo-large-btn btn" style="--w: 85%;">
                                        <img 
                                            src=""
                                            class="icon"> 点击下载
                                    </div>
                                </div>
                            </div>
                            <div  class="bottom">
                                <div  class="bottom-text">多人合作投资合作协议书</div>
                            </div>
                        </div>
                    </div>
                    <div  class="wrapper">
                        <div   class="mo-file-card my-card-item">
                            <div  class="card-title"><img 
                                    src="@/assets/img/word_icon.png" class="file-icon">
                                <div  class="card-title-text">
                                    <div  class="main-text">有关广西汽车租赁合同范本+汽车租赁合同范本</div>
                                    <div  class="subtitle-text">docx<span
                                            >|</span>A4标准打印<span >|</span>可修改</div>
                                </div>
                            </div>
                            <div  class="good-image-content"><img 
                                    src="http://file.zhiniceshi.com/mo_file/good_image/1770.jpg" alt="有关广西汽车租赁合同范本+汽车租赁合同范本"
                                    class="good-image">
                                <div  class="show-hover">
                                    <div   class="mo-large-btn btn" style="--w: 85%;">
                                        <img 
                                            src=""
                                            class="icon"> 点击下载
                                    </div>
                                </div>
                            </div>
                            <div  class="bottom">
                                <div  class="bottom-text">有关广西汽车租赁合同范本+汽车租赁合同范本</div>
                            </div>
                        </div>
                    </div>
                    <div  class="wrapper">
                        <div   class="mo-file-card my-card-item">
                            <div  class="card-title"><img 
                                    src="@/assets/img/word_icon.png" class="file-icon">
                                <div  class="card-title-text">
                                    <div  class="main-text">安全协议样书</div>
                                    <div  class="subtitle-text">docx<span
                                            >|</span>A4标准打印<span >|</span>可修改</div>
                                </div>
                            </div>
                            <div  class="good-image-content"><img 
                                    src="http://file.zhiniceshi.com/mo_file/good_image/2295.jpg" alt="安全协议样书"
                                    class="good-image">
                                <div  class="show-hover">
                                    <div   class="mo-large-btn btn" style="--w: 85%;">
                                        <img 
                                            src=""
                                            class="icon"> 点击下载
                                    </div>
                                </div>
                            </div>
                            <div  class="bottom">
                                <div  class="bottom-text">安全协议样书</div>
                            </div>
                        </div>
                    </div>
                    <div  class="wrapper">
                        <div   class="mo-file-card my-card-item">
                            <div  class="card-title"><img 
                                    src="@/assets/img/word_icon.png" class="file-icon">
                                <div  class="card-title-text">
                                    <div  class="main-text">居间合同范文,居间合同</div>
                                    <div  class="subtitle-text">docx<span
                                            >|</span>A4标准打印<span >|</span>可修改</div>
                                </div>
                            </div>
                            <div  class="good-image-content"><img 
                                    src="http://file.zhiniceshi.com/mo_file/good_image/2547.jpg" alt="居间合同范文,居间合同"
                                    class="good-image">
                                <div  class="show-hover">
                                    <div   class="mo-large-btn btn" style="--w: 85%;">
                                        <img 
                                            src=""
                                            class="icon"> 点击下载
                                    </div>
                                </div>
                            </div>
                            <div  class="bottom">
                                <div  class="bottom-text">居间合同范文,居间合同</div>
                            </div>
                        </div>
                    </div>
                    <div  class="wrapper">
                        <div   class="mo-file-card my-card-item">
                            <div  class="card-title"><img 
                                    src="@/assets/img/word_icon.png" class="file-icon">
                                <div  class="card-title-text">
                                    <div  class="main-text">20XX最新+-+家庭财产遗嘱范本</div>
                                    <div  class="subtitle-text">docx<span
                                            >|</span>A4标准打印<span >|</span>可修改</div>
                                </div>
                            </div>
                            <div  class="good-image-content"><img 
                                    src="http://file.zhiniceshi.com/mo_file/good_image/827.jpg" alt="20XX最新+-+家庭财产遗嘱范本"
                                    class="good-image">
                                <div  class="show-hover">
                                    <div   class="mo-large-btn btn" style="--w: 85%;">
                                        <img 
                                            src=""
                                            class="icon"> 点击下载
                                    </div>
                                </div>
                            </div>
                            <div  class="bottom">
                                <div  class="bottom-text">20XX最新+-+家庭财产遗嘱范本</div>
                            </div>
                        </div>
                    </div>
                    <div  class="wrapper">
                        <div   class="mo-file-card my-card-item">
                            <div  class="card-title"><img 
                                    src="@/assets/img/word_icon.png" class="file-icon">
                                <div  class="card-title-text">
                                    <div  class="main-text">转让合同：店铺转让合同</div>
                                    <div  class="subtitle-text">docx<span
                                            >|</span>A4标准打印<span >|</span>可修改</div>
                                </div>
                            </div>
                            <div  class="good-image-content"><img 
                                    src="http://file.zhiniceshi.com/mo_file/good_image/2425.jpg" alt="转让合同：店铺转让合同"
                                    class="good-image">
                                <div  class="show-hover">
                                    <div   class="mo-large-btn btn" style="--w: 85%;">
                                        <img 
                                            src=""
                                            class="icon"> 点击下载
                                    </div>
                                </div>
                            </div>
                            <div  class="bottom">
                                <div  class="bottom-text">转让合同：店铺转让合同</div>
                            </div>
                        </div>
                    </div>
                    <div  class="wrapper">
                        <div   class="mo-file-card my-card-item">
                            <div  class="card-title"><img 
                                    src="@/assets/img/word_icon.png" class="file-icon">
                                <div  class="card-title-text">
                                    <div  class="main-text">个人合作协议个人与公司的协议书</div>
                                    <div  class="subtitle-text">doc<span
                                            >|</span>A4标准打印<span >|</span>可修改</div>
                                </div>
                            </div>
                            <div  class="good-image-content"><img 
                                    src="http://file.zhiniceshi.com/mo_file/good_image/2740.jpg" alt="个人合作协议个人与公司的协议书"
                                    class="good-image">
                                <div  class="show-hover">
                                    <div   class="mo-large-btn btn" style="--w: 85%;">
                                        <img 
                                            src=""
                                            class="icon"> 点击下载
                                    </div>
                                </div>
                            </div>
                            <div  class="bottom">
                                <div  class="bottom-text">个人合作协议个人与公司的协议书</div>
                            </div>
                        </div>
                    </div>
                    <div  class="wrapper">
                        <div   class="mo-file-card my-card-item">
                            <div  class="card-title"><img 
                                    src="@/assets/img/word_icon.png" class="file-icon">
                                <div  class="card-title-text">
                                    <div  class="main-text">房屋租赁合同模板</div>
                                    <div  class="subtitle-text">doc<span
                                            >|</span>A4标准打印<span >|</span>可修改</div>
                                </div>
                            </div>
                            <div  class="good-image-content"><img 
                                    src="http://file.zhiniceshi.com/mo_file/good_image/20231124/27949.jpg" alt="房屋租赁合同模板"
                                    class="good-image">
                                <div  class="show-hover">
                                    <div   class="mo-large-btn btn" style="--w: 85%;">
                                        <img 
                                            src=""
                                            class="icon"> 点击下载
                                    </div>
                                </div>
                            </div>
                            <div  class="bottom">
                                <div  class="bottom-text">房屋租赁合同模板</div>
                            </div>
                        </div>
                    </div>
                    <div  class="wrapper">
                        <div   class="mo-file-card my-card-item">
                            <div  class="card-title"><img 
                                    src="@/assets/img/word_icon.png" class="file-icon">
                                <div  class="card-title-text">
                                    <div  class="main-text">服务合同范文：物业服务合同</div>
                                    <div  class="subtitle-text">docx<span
                                            >|</span>A4标准打印<span >|</span>可修改</div>
                                </div>
                            </div>
                            <div  class="good-image-content"><img 
                                    src="http://file.zhiniceshi.com/mo_file/good_image/3154.jpg" alt="服务合同范文：物业服务合同"
                                    class="good-image">
                                <div  class="show-hover">
                                    <div   class="mo-large-btn btn" style="--w: 85%;">
                                        <img 
                                            src=""
                                            class="icon"> 点击下载
                                    </div>
                                </div>
                            </div>
                            <div  class="bottom">
                                <div  class="bottom-text">服务合同范文：物业服务合同</div>
                            </div>
                        </div>
                    </div>
                    <div  class="wrapper">
                        <div   class="mo-file-card my-card-item">
                            <div  class="card-title"><img 
                                    src="@/assets/img/word_icon.png" class="file-icon">
                                <div  class="card-title-text">
                                    <div  class="main-text">商贸购销合同协议合同书</div>
                                    <div  class="subtitle-text">doc<span
                                            >|</span>A4标准打印<span >|</span>可修改</div>
                                </div>
                            </div>
                            <div  class="good-image-content"><img 
                                    src="http://file.zhiniceshi.com/mo_file/good_image/20231123/6445.jpg" alt="商贸购销合同协议合同书"
                                    class="good-image">
                                <div  class="show-hover">
                                    <div   class="mo-large-btn btn" style="--w: 85%;">
                                        <img 
                                            src=""
                                            class="icon"> 点击下载
                                    </div>
                                </div>
                            </div>
                            <div  class="bottom">
                                <div  class="bottom-text">商贸购销合同协议合同书</div>
                            </div>
                        </div>
                    </div>
                    <div  class="wrapper">
                        <div   class="mo-file-card my-card-item">
                            <div  class="card-title"><img 
                                    src="@/assets/img/word_icon.png" class="file-icon">
                                <div  class="card-title-text">
                                    <div  class="main-text">婚内有财产离婚协议</div>
                                    <div  class="subtitle-text">docx<span
                                            >|</span>A4标准打印<span >|</span>可修改</div>
                                </div>
                            </div>
                            <div  class="good-image-content"><img 
                                    src="http://file.zhiniceshi.com/mo_file/good_image/698.jpg" alt="婚内有财产离婚协议"
                                    class="good-image">
                                <div  class="show-hover">
                                    <div   class="mo-large-btn btn" style="--w: 85%;">
                                        <img 
                                            src=""
                                            class="icon"> 点击下载
                                    </div>
                                </div>
                            </div>
                            <div  class="bottom">
                                <div  class="bottom-text">婚内有财产离婚协议</div>
                            </div>
                        </div>
                    </div>
                    <div  class="wrapper">
                        <div   class="mo-file-card my-card-item">
                            <div  class="card-title"><img 
                                    src="@/assets/img/word_icon.png" class="file-icon">
                                <div  class="card-title-text">
                                    <div  class="main-text">股权代持协议书通用版本范本</div>
                                    <div  class="subtitle-text">docx<span
                                            >|</span>A4标准打印<span >|</span>可修改</div>
                                </div>
                            </div>
                            <div  class="good-image-content"><img 
                                    src="http://file.zhiniceshi.com/mo_file/good_image/1380.jpg" alt="股权代持协议书通用版本范本"
                                    class="good-image">
                                <div  class="show-hover">
                                    <div   class="mo-large-btn btn" style="--w: 85%;">
                                        <img 
                                            src=""
                                            class="icon"> 点击下载
                                    </div>
                                </div>
                            </div>
                            <div  class="bottom">
                                <div  class="bottom-text">股权代持协议书通用版本范本</div>
                            </div>
                        </div>
                    </div>
                    <div  class="wrapper">
                        <div   class="mo-file-card my-card-item">
                            <div  class="card-title"><img 
                                    src="@/assets/img/word_icon.png" class="file-icon">
                                <div  class="card-title-text">
                                    <div  class="main-text">购销合同：购销合同-(1)</div>
                                    <div  class="subtitle-text">docx<span
                                            >|</span>A4标准打印<span >|</span>可修改</div>
                                </div>
                            </div>
                            <div  class="good-image-content"><img 
                                    src="http://file.zhiniceshi.com/mo_file/good_image/20231124/28360.jpg"
                                    alt="购销合同：购销合同-(1)" class="good-image">
                                <div  class="show-hover">
                                    <div   class="mo-large-btn btn" style="--w: 85%;">
                                        <img 
                                            src=""
                                            class="icon"> 点击下载
                                    </div>
                                </div>
                            </div>
                            <div  class="bottom">
                                <div  class="bottom-text">购销合同：购销合同-(1)</div>
                            </div>
                        </div>
                    </div>
                    <div  class="wrapper">
                        <div   class="mo-file-card my-card-item">
                            <div  class="card-title"><img 
                                    src="@/assets/img/word_icon.png" class="file-icon">
                                <div  class="card-title-text">
                                    <div  class="main-text">承包合同：保洁承包合同</div>
                                    <div  class="subtitle-text">doc<span
                                            >|</span>A4标准打印<span >|</span>可修改</div>
                                </div>
                            </div>
                            <div  class="good-image-content"><img 
                                    src="http://file.zhiniceshi.com/mo_file/good_image/1962.jpg" alt="承包合同：保洁承包合同"
                                    class="good-image">
                                <div  class="show-hover">
                                    <div   class="mo-large-btn btn" style="--w: 85%;">
                                        <img 
                                            src=""
                                            class="icon"> 点击下载
                                    </div>
                                </div>
                            </div>
                            <div  class="bottom">
                                <div  class="bottom-text">承包合同：保洁承包合同</div>
                            </div>
                        </div>
                    </div>
                    <div  class="wrapper">
                        <div   class="mo-file-card my-card-item">
                            <div  class="card-title"><img 
                                    src="@/assets/img/word_icon.png" class="file-icon">
                                <div  class="card-title-text">
                                    <div  class="main-text">红酒买卖合同+-+买卖合同</div>
                                    <div  class="subtitle-text">doc<span
                                            >|</span>A4标准打印<span >|</span>可修改</div>
                                </div>
                            </div>
                            <div  class="good-image-content"><img 
                                    src="http://file.zhiniceshi.com/mo_file/good_image/2302.jpg" alt="红酒买卖合同+-+买卖合同"
                                    class="good-image">
                                <div  class="show-hover">
                                    <div   class="mo-large-btn btn" style="--w: 85%;">
                                        <img 
                                            src=""
                                            class="icon"> 点击下载
                                    </div>
                                </div>
                            </div>
                            <div  class="bottom">
                                <div  class="bottom-text">红酒买卖合同+-+买卖合同</div>
                            </div>
                        </div>
                    </div>
                    <div  class="wrapper">
                        <div   class="mo-file-card my-card-item">
                            <div  class="card-title"><img 
                                    src="@/assets/img/word_icon.png" class="file-icon">
                                <div  class="card-title-text">
                                    <div  class="main-text">房屋租赁合同</div>
                                    <div  class="subtitle-text">doc<span
                                            >|</span>A4标准打印<span >|</span>可修改</div>
                                </div>
                            </div>
                            <div  class="good-image-content"><img 
                                    src="http://file.zhiniceshi.com/mo_file/good_image/20231124/27948.jpg" alt="房屋租赁合同"
                                    class="good-image">
                                <div  class="show-hover">
                                    <div   class="mo-large-btn btn" style="--w: 85%;">
                                        <img 
                                            src=""
                                            class="icon"> 点击下载
                                    </div>
                                </div>
                            </div>
                            <div  class="bottom">
                                <div  class="bottom-text">房屋租赁合同</div>
                            </div>
                        </div>
                    </div>
                    <div  class="wrapper">
                        <div   class="mo-file-card my-card-item">
                            <div  class="card-title"><img 
                                    src="@/assets/img/word_icon.png" class="file-icon">
                                <div  class="card-title-text">
                                    <div  class="main-text">建设工程合同-工程施工劳务分包合同 (4页)</div>
                                    <div  class="subtitle-text">docx<span
                                            >|</span>A4标准打印<span >|</span>可修改</div>
                                </div>
                            </div>
                            <div  class="good-image-content"><img 
                                    src="http://file.zhiniceshi.com/mo_file/good_image/20231123/8870.jpg"
                                    alt="建设工程合同-工程施工劳务分包合同  (4页)" class="good-image">
                                <div  class="show-hover">
                                    <div   class="mo-large-btn btn" style="--w: 85%;">
                                        <img 
                                            src=""
                                            class="icon"> 点击下载
                                    </div>
                                </div>
                            </div>
                            <div  class="bottom">
                                <div  class="bottom-text">建设工程合同-工程施工劳务分包合同 (4页)</div>
                            </div>
                        </div>
                    </div>
                    <div  class="wrapper">
                        <div   class="mo-file-card my-card-item">
                            <div  class="card-title"><img 
                                    src="@/assets/img/word_icon.png" class="file-icon">
                                <div  class="card-title-text">
                                    <div  class="main-text">20XX最新+-+老人遗嘱范文</div>
                                    <div  class="subtitle-text">docx<span
                                            >|</span>A4标准打印<span >|</span>可修改</div>
                                </div>
                            </div>
                            <div  class="good-image-content"><img 
                                    src="http://file.zhiniceshi.com/mo_file/good_image/828.jpg" alt="20XX最新+-+老人遗嘱范文"
                                    class="good-image">
                                <div  class="show-hover">
                                    <div   class="mo-large-btn btn" style="--w: 85%;">
                                        <img 
                                            src=""
                                            class="icon"> 点击下载
                                    </div>
                                </div>
                            </div>
                            <div  class="bottom">
                                <div  class="bottom-text">20XX最新+-+老人遗嘱范文</div>
                            </div>
                        </div>
                    </div>
                    <div  class="wrapper">
                        <div   class="mo-file-card my-card-item">
                            <div  class="card-title"><img 
                                    src="@/assets/img/word_icon.png" class="file-icon">
                                <div  class="card-title-text">
                                    <div  class="main-text">内蒙古自治区劳动人事厅临时工劳动合同书</div>
                                    <div  class="subtitle-text">docx<span
                                            >|</span>A4标准打印<span >|</span>可修改</div>
                                </div>
                            </div>
                            <div  class="good-image-content"><img 
                                    src="http://file.zhiniceshi.com/mo_file/good_image/919.jpg" alt="内蒙古自治区劳动人事厅临时工劳动合同书"
                                    class="good-image">
                                <div  class="show-hover">
                                    <div   class="mo-large-btn btn" style="--w: 85%;">
                                        <img 
                                            src=""
                                            class="icon"> 点击下载
                                    </div>
                                </div>
                            </div>
                            <div  class="bottom">
                                <div  class="bottom-text">内蒙古自治区劳动人事厅临时工劳动合同书</div>
                            </div>
                        </div>
                    </div>
                    <div  class="wrapper">
                        <div   class="mo-file-card my-card-item">
                            <div  class="card-title"><img 
                                    src="@/assets/img/word_icon.png" class="file-icon">
                                <div  class="card-title-text">
                                    <div  class="main-text">购销合同：购销合同-</div>
                                    <div  class="subtitle-text">docx<span
                                            >|</span>A4标准打印<span >|</span>可修改</div>
                                </div>
                            </div>
                            <div  class="good-image-content"><img 
                                    src="http://file.zhiniceshi.com/mo_file/good_image/20231124/28361.jpg" alt="购销合同：购销合同-"
                                    class="good-image">
                                <div  class="show-hover">
                                    <div   class="mo-large-btn btn" style="--w: 85%;">
                                        <img 
                                            src=""
                                            class="icon"> 点击下载
                                    </div>
                                </div>
                            </div>
                            <div  class="bottom">
                                <div  class="bottom-text">购销合同：购销合同-</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div  class="slogan">精品模板一键下载</div>
            <div   class="mo-large-btn load-btn round" style="--w: 85%;"> 查看更多
            </div>
        </div>
    </div>
    <div  class="mo-footer">
        <div  class="services">
            <div  class="service-item"><img 
                    src="">全站精品
            </div>
            <div  class="service-item"><img 
                    src="">高速下载
            </div>
            <div  class="service-item"><img 
                    src="">优质服务
            </div>
            <div  class="service-item"><img 
                    src="">下载即用
            </div>
        </div>
        <div  class="content">
            <div  class="c-left">
                <div  class="logo-content"><img  src="@/assets/img/logo_wtx.png"
                        class="logo">
                    <div  class="logo-text"><img  src="@/assets/img/logo_text.png">
                        提高您的办公效率 </div>
                </div>
                <div  class="links-and-copyright">
                    <div  class="links">
                        <div >网站声明</div>
                        <div >侵权处理</div>
                        <div >关于我们</div>
                </div>
                <div  style="margin-top: 15px;"><a 
                        href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank"> 鄂ICP备2023009755号-1
                    </a>&nbsp;武汉市紫裕科技有限公司版权所有 </div>
            </div>
        </div>
        <div  class="qr"><img  class="gzh-qr-img"
                src="http://file.zhiniceshi.com/transfer/prod/202281183834"> 关注官方微信公众号 </div>
    </div>
</div>

<div  class="mo-site-right-float-block">
    <div  class="vip"><img 
            src=""
            class="vip-icon"> 限时VIP<br >优惠 </div>
    <div  class="standard collect"><img 
            src=""
            class="icon collect0-icon"><img 
            src=""
            class="icon collect-icon"> 收藏本站 <div  class="collect-tip">
            <div  style="margin-bottom: 10px;">快速收藏本站</div>
            <div ><span >Ctrl</span> + <span >D</span></div>
        </div>
    </div>
    <div  class="standard top"><img 
            src=""
            class="icon top0-icon"><img 
            src=""
            class="icon top-icon"> 置顶 </div>
</div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { useRouter } from 'vue-router';
import axios from '@/server';

import { useCatagoryStore } from '@/stores/catagory.js'

const searchValue =ref('');
const geshiData=reactive({
    geshiValue:'',
    geshiList:[
    {
       key: '全部格式',
       value:''
    },
    {
       key: 'PPT模板',
       value:1
    },    {
       key: 'Word模板',
       value:2
    },    {
       key: 'Excel模板',
       value:3
    },
]
})

</script>
<style lang="less">
.el-select .el-input__wrapper{
    padding: 0;
}
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected.hover {
    background-color: #f5f7fa
}

 

 

 
/* //鼠标移动上去的选中色 */
.el-select-dropdown__item.hover,
.el-popper.is-light.mySelectStyle {
    background-color: #ffefe3 !important;
}
 

/* //鼠标移动上去的选中色 */
.mySelectStyle {
 
    .el-select-dropdown__item.hover,
    .el-select-dropdown__item:hover {
        background-color: #ffefe3 !important;
    }
 
    /* //下拉框的文本颜色 */
    .el-select-dropdown__item {
        color: #606266 !important;
    }
 
    /* //选中之后的颜色 */
    .el-select-dropdown__item.selected {
        background: #ffefe3  !important;
    }
}

</style>